<template>
    <div style="margin-bottom: 30px">
        <div @click="inputFocus" class="my-reply reply-padding">
            <div style="display:flex;align-items: center;">
                <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                <div class="reply-input reply-padding">我要留言...</div>
            </div>
        </div>
        <div v-for="(item, i) in comments" :key="i" class="author-title reply-father reply-padding">
            <div class="reply-content">
                <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                <div class="author-info">
                    <div class="reply-info">
                        <span class="reply">{{ item.colCompany }}</span>
                        <span class="author-time">{{ item.colDate }}</span>
                    </div>
                    <div class="reply-info">
                        <span class="reply-padding">{{ item.colContent }}</span>
                    </div>
                </div>
            </div>

            <template v-if="item.children && item.children.length">
                <div class="my-reply reply-padding ml-50" v-for="child in item.children" :key="child.colId">
                    <div class="reply-content">
                        <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                        <div class="author-info">
                            <div class="reply-info">
                                <span class="reply">{{ child.colUserName }}</span>
                                <span class="author-time">{{ child.colDate }}</span>
                            </div>
                            <div class="reply-info">
                                <div class="reply-padding">回复: {{ child.colContent }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <el-dialog title="留言" :visible.sync="replayDialogVisible" append-to-body :close-on-click-modal="false" width="30%">
            <el-form label-position="top" label-width="80px" :model="replyForm" ref="replyForm" :rules="replyRules">
                <el-form-item label="姓名" prop="userName">
                    <el-input v-model="replyForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="联系方式（手机号）" prop="userContact">
                    <el-input v-model="replyForm.userContact" maxlength="11"></el-input>
                </el-form-item>
                <el-form-item label="所属公司" prop="userCompany">
                    <el-input v-model="replyForm.userCompany"></el-input>
                </el-form-item>
                <el-form-item label="留言内容" prop="articleContent">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
                        v-model="replyForm.articleContent"></el-input>
                </el-form-item>
                <el-form-item prop="protocol">
                    <el-checkbox
                        v-model="replyForm.protocol">我们将存储您向我们提供的信息。我们仅将此信息用于帮助回答您的询问之目的。我们不会泄露您的资料。勾选此方框即表示您同意上述条款。</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('replyForm')">立即发表</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { validateMobile, dateToString, handleArryToTree } from '@/utils/utils'
export default {
    name: 'ArticleComment',
    props: {
        articleId: {
            type: String,
            default: () => {
                return ''
            }
        }
    },
    data() {
        return {
            comments: [], //评论列表
            myHeader: '',
            replayDialogVisible: false,
            replyForm: {
                userName: '',
                userContact: '',
                userCompany: '',
                articleContent: '',
                protocol: false
            },
            replyRules: {
                userName: [
                    { required: true, trigger: "change", message: "请输入您的姓名" }
                ],
                userContact: [
                    { required: true, trigger: "change", message: "请输入您的联系方式（手机号）" },
                    { validator: validateMobile.bind(this), trigger: 'change' }
                ],
                userCompany: [
                    { required: true, trigger: "change", message: "请输入所属公司" }
                ],
                articleContent: [
                    { required: true, trigger: "change", message: "请输入留言内容" }
                ],
                protocol: [
                    { required: true, trigger: "change", message: "请勾选协议" },
                    {
                        validator: function (rule, value, callback) {
                            if (value == false) {
                                callback('请勾选协议')
                            } else {
                                callback()
                            }
                        }, trigger: 'change'
                    }
                ]
            },
        }
    },
    mounted() {
    },
    methods: {
        inputFocus() {
            // 弹出留言框
            console.log('弹出留言框')
            this.replayDialogVisible = true
        },
        dateStr(date) {
            //获取js 时间戳
            var time = new Date().getTime();
            //去掉 js 时间戳后三位，与php 时间戳保持一致
            time = parseInt((time - date) / 1000);
            //存储转换值 
            var s;
            if (time < 60 * 10) {//十分钟内
                return '刚刚';
            } else if ((time < 60 * 60) && (time >= 60 * 10)) {
                //超过十分钟少于1小时
                s = Math.floor(time / 60);
                return s + "分钟前";
            } else if ((time < 60 * 60 * 24) && (time >= 60 * 60)) {
                //超过1小时少于24小时
                s = Math.floor(time / 60 / 60);
                return s + "小时前";
            } else if ((time < 60 * 60 * 24 * 30) && (time >= 60 * 60 * 24)) {
                //超过1天少于30天内
                s = Math.floor(time / 60 / 60 / 24);
                return s + "天前";
            } else {
                //超过30天ddd
                var date = new Date(parseInt(date));
                return date.getFullYear() + "/" + (date.getMonth() + 1) + "/" + date.getDate();
            }
        },
        submitForm(form) {
            this.$refs[form].validate((res) => {
                if (res) {
                    // 发起回复接口
                    let request = {
                        ...this.replyForm,
                        articleId: this.articleId,
                        articleTitle: this.replyForm.articleContent
                    }
                    this.$api.articletype.gettArticleQuestionadd(request).then(res => {
                        const data = res.data
                        if (data.code == 200) {
                            console.log(data)
                            const msg = data.msg
                            this.replayDialogVisible = false
                            this.$alert(msg, '提示', {
                                confirmButtonText: '确定'
                            });
                            this.replyForm = {
                                userName: '',
                                userContact: '',
                                userCompany: '',
                                articleContent: '',
                                protocol: false
                            }
                        }
                    })
                }
            })
        },
    },
}
</script>

<style lang="scss" scoped>
@media (max-width:1024px) {
    .reply-padding {
        padding: 10px 5px !important;
    }

    .author-name {
        font-size: 14px !important;
    }

    .author-time {
        font-size: 12px !important;
    }

    .reply {
        font-size: 14px !important;
    }

    ::v-deep .el-dialog {
        width: 80% !important;
    }

    ::v-deep .el-dialog__body {
        padding: 5px;
    }

    ::v-deep .el-form-item__label {
        padding: 0;
        line-height: 0;
    }

    ::v-deep .el-button {
        width: 100%;
    }
}

// @media (min-width:576px) {
//     ::v-deep .el-dialog {
//         width: 30%;
//     }
// }



.reply-padding {
    padding: 10px;
}

.header-img {
    flex-shrink: 0;
}

.my-reply {
    background-color: #eee;

    .reply-btn-box {
        height: 25px;
        margin: 10px 0;

        .reply-btn {
            position: relative;
            float: right;
        }
    }
}

.reply-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
    min-height: 40px;
}

.reply {
    font-weight: 800;
}

.author-info {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    line-height: 20px;

    >span {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .author-name {
        color: #000;
        font-size: 18px;
        font-weight: bold;
    }

    .author-time {
        font-size: 14px;
    }

}

.reply-input {
    background-color: white;
    border-radius: 5px;
    margin-left: 20px;
    width: 100%;
}

.reply-content {
    display: flex;
}

.ml-50 {
    margin-left: 50px;
}

::v-deep .el-checkbox__label {
    display: inline-grid;
    white-space: pre-line;
    word-wrap: break-word;
    line-height: 20px;
    padding-right: 20px;
}

.author-title:not(:last-child) {
    border: 1px solid rgba(178, 186, 194, .3);
    border-top: 0;
}
</style>
